CSS
Avanzado
1.
Selectores
Avanzados
En
CSS,
los
"selectores"
nos
permiten
aplicar
estilos
a
elementos
específicos.
Ya
conocemos
algunos
básicos
como
p
,
.clase
y
#id
,
pero
hay
otros
muy
útiles:
Selector
de
hijo
directo
(
>
)
Aplica
estilos
solo
a
los
hijos
directos
de
un
elemento.
/*
Solo
los
<p>
que
estén
dentro
directamente
de
un
<div>
*/
div
>
p
{
color:
blue;
}
Selector
de
hermano
adyacente
(
+
)
Selecciona
un
elemento
que
esté
justo
después
de
otro.
h1
+
p
{
color:
green;
}
Selector
de
hermano
general
(
~
)
Selecciona
todos
los
elementos
que
vengan
después
de
otro,
sin
importar
si
están
seguidos
o
no.
h1
~
p
{
color:
orange;
}
2.
Modelos
de
Caja
en
CSS
Todo
elemento
en
una
página
web
se
comporta
como
una
"caja"
con:
●
Contenido:
el
texto
o
imagen
dentro
de
la
caja.
●
Padding:
espacio
entre
el
contenido
y
el
borde.
●
Borde:
el
límite
de
la
caja.
●
Margen:
espacio
fuera
del
borde,
separando
la
caja
de
otras.
Ejemplo
visual
con
CSS:
div
{
width:
200px;
padding:
20px;
border:
5px
solid
black;
margin:
10px;
}
3.
Posicionamiento
en
CSS
position:
static
(por
defecto)
Los
elementos
aparecen
en
el
orden
natural
de
la
página.
position:
relative
Permite
mover
un
elemento
sin
afectar
a
los
demás.
div
{
position:
relative;
top:
20px;
left:
30px;
}
position:
absolute
El
elemento
se
posiciona
respecto
al
primer
ancestro
con
position:
relative
.
div
{
position:
absolute;
top:
50px;
left:
50px;
}
position:
fixed
El
elemento
se
mantiene
fijo
en
la
pantalla
aunque
se
haga
scroll.
div
{
position:
fixed;
bottom:
10px;
right:
10px;
}
4.
Flexbox:
Alineación
Fácil
Flexbox
nos
ayuda
a
organizar
elementos
de
manera
flexible.
.container
{
display:
flex;
justify-content:
center;
align-items:
center;
}
Explicación:
●
justify-content
:
Alinea
los
elementos
en
la
dirección
principal
(horizontal
por
defecto).
●
align-items
:
Alinea
los
elementos
en
la
dirección
secundaria
(vertical
por
defecto).
5.
Animaciones
con
CSS
Podemos
hacer
que
los
elementos
cambien
de
apariencia
con
transiciones
y
animaciones.
Transiciones
div
{
background-color:
red;
transition:
background-color
1s;
}
div:hover
{
background-color:
blue;
}
Cuando
pasamos
el
mouse
sobre
el
div
,
su
color
cambiará
de
rojo
a
azul
en
1
segundo.
Animaciones
@keyframes
mover
{
from
{
transform:
translateX(0);
}
to
{
transform:
translateX(100px);
}
}
div
{
animation:
mover
2s
infinite
alternate;
}
Esto
hará
que
el
div
se
mueva
de
izquierda
a
derecha
de
forma
continua.
Ejercicio
Crea
una
página
con
un
div
centrado
usando
Flexbox,
que
cambie
de
color
al
pasar
el
mouse
y
que
tenga
una
animación
de
movimiento.
Si
tienes
dudas,
pruebalo
y
ajusta
el
código
hasta
entenderlo
bien.
¡Practicar
es
la
clave!
Contactanos
Español
Sin
Fronteras
Gmail
espanolsinfronteras1@gmail.com
Español
Sin
Fronteras
-
Recursos
Educativos
Gratuitos
Instagram
@espanol_sin_fronteras_org